<template>
  <div class="videoDetail">
    <div class="left">
      <div class="title">MV详情</div>
      <video
        class="videoPlayer"
        :src="mvUrl"
        controls
        width="556px"
        height="310px"
        :poster="mvinfo.cover"
      ></video>
      <div class="singer">
        <div class="img">
          <img :src="mvinfo.artists[0].img1v1Url" alt="" />
        </div>
        <div class="name">{{ mvinfo.artistName }}</div>
      </div>
      <div class="mvtitle">{{ mvinfo.name }}</div>
      <div class="otherinfo">
        <div>发布：{{ mvinfo.publishTime }}</div>
        <div>播放：{{ mvinfo.playCount | handleNum }}</div>
      </div>
      <div class="buttons">
        <div class="buttonItem">
          <i class="iconfont icon-dianzan"> </i>
          赞
        </div>
        <div class="buttonItem">
          <i class="iconfont icon-aixin"> </i>
          收藏
        </div>
        <div class="buttonItem">
          <i class="iconfont icon-fenxiang"> </i>
          分享
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">相关推荐</div>
      <div class="relatedVideoItem">
        <div class="video_img">
          <img src="" alt="" />
          <div class="playcount">
            <i class="iconfont icon-MV"></i>
            1
          </div>
          <div class="songtime">2</div>
        </div>
        <div class="relatedVideoItemInfo">
          <div class="relatedVideoItemTitle">3</div>
          <div class="creator">by：</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Videodetail",
  data() {
    return {
      mvUrl: "",
      mvinfo: {},
    };
  },

  created() {
    this.getMvDetail();
    this.getMvUrl();
    this.getRecommendMv();
  },

  methods: {
    //   根据id获取mv信息
    async getMvDetail() {
      const { data: res } = await this.$http("mv/detail", {
        params: { mvid: this.$route.params.id },
      });
      console.log(res.data);
      this.mvinfo = res.data;
    },
    // 请求mv地址
    async getMvUrl() {
      const { data: res } = await this.$http("mv/url", {
        params: { id: this.$route.params.id },
      });
      this.mvUrl = res.data.url;
    },
    // 请求推荐mv
    async getRecommendMv() {
      const { data: res } = await this.$http("personalized/mv");
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
.videoDetail {
  width: 80%;
  margin: 0 auto;
  display: flex;
}
.left {
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  width: 500px;
}
.title {
  width: 100%;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: black;
  padding: 5px 0;
}
.singer {
  display: flex;
  height: 50px;
  margin-top: 10px;
  .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .name {
    font-size: 13px;
    margin-left: 14px;
    line-height: 40px;
  }
}
.mvtitle {
  width: 100%;
  margin-top: 10px;
  font-size: 25px;
  color: black;
  font-weight: 700;
}
.otherinfo {
  display: flex;
  font-size: 12px;
  color: #aaaaaa;
  margin-top: 10px;

  div:nth-child(2) {
    margin-left: 20px;
  }
}
.buttons {
  display: flex;
  margin-top: 10px;
}
.buttonItem {
  border: 1px solid #ccc;
  margin-right: 10px;
  width: 60px;
  height: 25px;
  border-radius: 20px;
  padding: 5px 20px;
  text-align: center;
}
.right {
  margin-left: 100px;
  display: flex;
  flex-direction: column;
}
.relatedVideoItem {
  display: flex;
  .video_img {
    position: relative;
    width: 300px;
    height: 150px;
    font-size: 14px;
    color: #666666;
    img {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }
    .playcount {
      position: absolute;
      top: 5px;
      right: 10px;
      i {
        color: red;
        font-size: 15px;
      }
    }
    .songtime {
      position: absolute;
      bottom: 5px;
      right: 10px;
    }
    .title {
      font-size: 15px;
      width: 100%;
      color: #666666;
    }
  }
}
.relatedVideoItemInfo {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  .relatedVideoItemTitle {
    font-size: 18px;
    color: rgb(31, 30, 30);
    margin-top: 20px;
  }
  .creator {
    margin-top: 20px;
    font-size: 14px;
    color: #aaaaaa;
  }
}
</style>